<template>
  <el-dialog
    :modal="false"
    :close-on-click-modal="false"
    width="90%"
    :visible.sync="visible"
  >
    <div ref="exportPdf" id="exportPdf">
    <div class="title">测试第二部</div>
    <div class="cont">
      <!-- 第一行表格 五列 -->
      <div class="table">
          <div class="box">
            <div class="content1">姓名</div>
            <div class="content_border">测试人</div>
            <div class="content1">性别</div>
            <div class="content_border">男</div>
            <div class="content1">出生年月</div>
            <div class="content_border">1989-02-25</div>
            <div class="content1">参加工作时间</div>
            <div class="content_border">1989-02-25</div>
            <div class="content1">退休时间</div>
            <div class="content_border">1989-02-25</div>
          </div>
      </div>
      <!-- 第二行表格 三列 2-4 -->
      <div class="table">
          <div class="box">
            <div class="content1">职务</div>
            <div class="content_border">职务人员</div>
            <div class="content4">工资等级</div>
            <div class="content_border1">高级工九档</div>
            <div class="content1">参加工作时间</div>
            <div class="content_border">1989-02-25</div>
            <div class="content1">退休时间</div>
            <div class="content_border">1989-02-25</div>
        </div>
      </div>
      <!-- 第三行表格 三列 2-4 -->
      <div class="table">
          <div class="box">
            <div class="content1">教（护）龄</div>
            <div class="content_border">200</div>
            <div class="content1">工作年限</div>
            <div class="content_border">122</div>
            <div class="content1">军队工作年限</div>
            <div class="content_border">100</div>
            <div class="content4">基本退休费计发比例</div>
            <div class="content_border1">80</div>
        </div>
      </div>
      <div class="table">
        <td style="width:10%"><div class="content11">退休费基数</div></td>
        <td style="width:90%">
          <div class="box">
            <div class="content1">教（护）龄</div>
            <div class="content_border">200</div>
            <div class="content1">工作年限</div>
            <div class="content_border">122</div>
        </div>
        <div class="box">
            <div class="content1">教（护）龄</div>
            <div class="content_border">200</div>
            <div class="content1">工作年限</div>
            <div class="content_border">122</div>
        </div>
        <div class="box">
            <div class="content1">教（护）龄</div>
            <div class="content_border">200</div>
            <div class="content1">工作年限</div>
            <div class="content_border">122</div>
        </div>
        </td>
        
      </div>
      <!-- 第三行表格 一列-->
      <!-- <div class="table">
        <div class="content3">现场处理情况信息</div>
      </div> -->
      <!-- 第四行表格 二列 -->
     
    </div>
  </div>
    <el-button type="primary" size="mini" @click="printHandle">打印预览</el-button>
  </el-dialog>
  
</template>
<script>

import html2canvas from 'html2canvas' // 转为图片
import printJS from 'print-js' // 打印
export default {
  data() {
    return {
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      logoutDateDisabled: false,
      deathDisabled: false,
      deathTimeDisabled: false,
      postLevel: false,
      salaryClass: false,
      allowanceRatioClass: false,
      wageGradeClass: false,
      rensonClass: false,
      activeName: "first",
      visible: false,
      isTitle: "",
      isDisabled: false,
      visibleLine:"",
      isDisabled2:false,
      sfxs:"none",
     
      dataForm: {
        
        
      },
      dataRule: {
        
      },
    };
  },
  created() {

  },
  computed: {
   
  },

  methods: {
    
    test() {
      
      this.visible = true;
      
      
    },
    printHandle() {
      html2canvas(this.$refs.exportPdf, {
        backgroundColor: null,
        useCORS: true,
        windowHeight: document.body.scrollHeight
      }).then(canvas => {
        const url = canvas.toDataURL()
        this.img = url
        printJS({
          printable: url,
          type: 'image',
          documentTitle: ''
        })
      })
    },
    
  },
};
</script>

<style scoped lang="scss">
$titleColor: rgb(117, 117, 117);
$borderColor: 1px solid #e9e9e9;
.title {
  width: 100%; // 1200px
  margin: 0 auto;
  margin-top: 30px;
  padding: 20px 0;
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  //background-color: #e1e1e1;
  // border: 1px solid #e1e1e1;
}
.cont {
  border-right: $borderColor;
}
.table {
  width: 100%; // 1200px
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.lump {
  width: 20%;
}
.lump2 {
  width: 40%;
}
.lump2:nth-child(3),
.lump2:nth-child(6),
.lump2:last-child {
  width: 20%;
}
.box {
  width: 100%;
  height: 40px;
  display: flex;
  border-top: $borderColor;
  .content1 {
    width: 40%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #fafafa;
    border-left: $borderColor;
    border-bottom: $borderColor;
    color: $titleColor;
    font-size: 14px;
  }
  .content2 {
    width: 60%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #fff;
    border-left: $borderColor;
    border-bottom: $borderColor;
    color: 000;
    font-size: 14px;
    cursor: pointer;
    overflow: hidden; //超出的文本隐藏
    text-overflow: ellipsis; //溢出用省略号显示
    white-space: nowrap; //溢出不换行
  }
  .content4 {
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #fafafa;
    border-left: $borderColor;
    border-bottom: $borderColor;
    color: $titleColor;
    font-size: 14px;
  }
  // .content2:last-child {
  //   border-right: $borderColor;
  // }
  .content_border {
    width: 60%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #fff;
    border-left: $borderColor;
    border-bottom: $borderColor;
    color: 000;
    font-size: 14px;
    cursor: pointer;
    overflow: hidden; //超出的文本隐藏
    text-overflow: ellipsis; //溢出用省略号显示
    white-space: nowrap; //溢出不换行
  }
  .content_border1 {
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #fff;
    border-left: $borderColor;
    border-bottom: $borderColor;
    color: 000;
    font-size: 14px;
    cursor: pointer;
    overflow: hidden; //超出的文本隐藏
    text-overflow: ellipsis; //溢出用省略号显示
    white-space: nowrap; //溢出不换行
  }
}
// 三列样式
.content3 {
  width: 100%;
  height: 40px;
  display: inline-block;
  line-height: 40px;
  text-align: center;
  background-color: #fff;
  border: $borderColor;
  border-right: none;
  color: 000;
  font-size: 14px;
  font-weight: 600;
}
// 四列样式
.lump4 {
  width: 100%;
  display: flex;
  // align-items: center;
  flex-wrap: wrap;
  box-sizing: border-box;
  border: $borderColor;
  border-top: none;
  border-right: none;
  .conttent4 {
    display: flex;
    align-items: center;
    width: calc(48% - 1px);
    height: 40px;
    line-height: 40px;
    border-right: $borderColor;
    background-color: #fff;
    text-align: left;
    cursor: pointer;
    white-space: nowrap; //溢出不换行
    &-title {
      color: $titleColor;
      padding-left: 12px;
    }
    &-txt {
      overflow: hidden; //超出的文本隐藏
      text-overflow: ellipsis; //溢出用省略号显示
      white-space: nowrap; //溢出不换行
    }
  }
  .conttent5 {
    display: flex;
    align-items: center;
    width: 52%;
    height: 40px;
    line-height: 40px;
    text-align: left;
    background-color: #fff;
    cursor: pointer;
    white-space: nowrap;
    &-title {
      padding-left: 12px;
      color: $titleColor;
    }
    &-txt {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .conttent6 {
    width: calc(48% - 1px);
    min-height: 100px;
    text-align: left;
    // border-right: $borderColor;
    background: #fff;
    border-top: none;
    cursor: pointer;
    // white-space: nowrap;
    &-title {
      color: $titleColor;
      padding: 12px;
    }
    &-txt {
      padding: 0 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    // 评价
    &-score {
      padding: 12px;
      &-title {
        color: $titleColor;
      }
      &-affirm {
        padding: 12px;
        padding-left: 0;
        ::v-deep .el-col {
          padding-bottom: 12px;
        }
        ::v-deep .el-col:last-child {
          padding-bottom: 0;
        }
      }
    }
  }
  .conttent7 {
    width: calc(52% - 30px);
    min-height: 100px;
    text-align: left;
    background: #fff;
    border-left: $borderColor;
    cursor: pointer;
    &-title {
      color: $titleColor;
      padding: 12px;
    }
    &-txt {
      padding: 0 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    // 签名
    &-sign {
      display: flex;
      align-items: center;
      padding: 12px;
      &-title {
        color: $titleColor;
      }
    }
  }
  .content11 {
    width: 10%;
    height: 120px;
    line-height: 120px;
    text-align: center;
    background-color: #fafafa;
    border-left: $borderColor;
    border-bottom: $borderColor;
    color: $titleColor;
    font-size: 14px;
  }
}
</style>